import React, {Component} from 'react';
import BaseOpts from '../BaseOpts';
import './index.css';
import {InputNumber, Input, Slider, Radio, Alert} from 'antd';
import SlideInput from '../../common/SlideInput/index';

class NearShopListOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            dataset: {}
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            data: props.data,
        };
    }

    render() {
        var {style, dataset} = this.state.data;

        return (
            <div className="optsPanel">
                <Alert message="建议：页面上不要放其它组件" type="warning" style={{marginBottom: '20px'}}/>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">左外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} value={parseInt(style.marginLeft || 0)}
                                    onChange={(val) => {
                                        this.$dataChange('marginLeft', val + 'px', 'style');
                                        this.$dataChange('marginRight', val + 'px', 'style');
                                    }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">下外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} value={parseInt(style.marginBottom || 0)}
                                    onChange={(val) => {
                                        this.$dataChange('marginBottom', val + 'px', 'style');
                                    }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <div className="optsPanel__item__bd">
                        <a href="/admin/XcxConfig/nearbyStoresList" target="_blank"
                           className="ant-btn-dataMng ant-btn ant-btn-primary ant-btn-lg">门店地址管理</a>
                    </div>
                </div>

            </div>
        );
    }
}

export default NearShopListOpts;
